<template>
  <Dialog v-model:visible="renderValues.show" :position="dialogPosition">
    <template #header>
      <slot name="header"/>
    </template>
    <div class="grid" :style="`max-width: ${maxWeight} !important;`">
      <div v-if="renderValues.showInput" class="col-12 flex justify-content-center p-3">
        <div class="p-inputgroup">
          <span class="p-inputgroup-addon">标题</span>
          <InputText v-model="inputVal"
                     :placeholder="renderValues.textPlaceholder"/>
        </div>
      </div>
      <div class="col-12 p-3" style="max-width: 100vw;">
        <VditorEditor :placeholder="renderValues.editorPlaceHolder"
                      :default-editor-value="renderValues.editorDefaultValue"
                      :editor-value="editorValue.value"
                      width="100%"
                      :toolbar="toolbar"
                      :outline="outline"
                      @change="editorChangeHandler"/>
      </div>
      <div class="col-12">
        <slot name="footer"/>
      </div>
    </div>
  </Dialog>
</template>

<script setup lang="ts">
/** JS */
import {ref, defineProps, defineEmits, watch, reactive, Ref, PropType} from 'vue';
/** 组件 */
import Dialog from 'primevue/dialog';
import VditorEditor from '../VditorEditor.vue';

type EditorVal = {
  md: string,
  html: string
}
type DialogPosition =
    "center"
    | "top"
    | "bottom"
    | "left"
    | "right"
    | "topleft"
    | "topright"
    | "bottomleft"
    | "bottomright";
/** props 和 emit */
const props = defineProps({
      // 最大宽度
      maxWeight: {
        type: String,
        default: '100vw'
      },
      // 是否显示
      show: {
        type: Boolean,
        default: false,
        required: true
      },
      // 输入 text placeholder
      textPlaceholder: {
        type: String,
        default: ''
      },
      // 编辑器 placeholder
      editorPlaceHolder: {
        type: String,
        default: ''
      },
      // input 默认值
      inputDefaultValue: {
        type: String,
      },
      // editor 默认值
      editorDefaultValue: {
        type: String,
      },
      // 是否显示 input
      showInput: {
        type: Boolean,
        default: true
      },
      // 限制图片最大的大小
      imgMaxHeight: {
        type: String,
        default: '100px'
      },
      imgMaxWidth: {
        type: String,
        default: '100px'
      },
      // 图片默认大小
      imgDefaultHeight: {
        type: String,
        default: '100px'
      },
      imgDefaultWidth: {
        type: String,
        default: '100px'
      },
      // dialog position
      dialogPosition: {
        type: String as PropType<DialogPosition>,
        default: 'center'
      },
      // toolbar
      toolbar: {
        type: Array
      },
      // 大纲
      outline: {
        type: Boolean,
        default: true
      },
    }),
    emits = defineEmits(['close', 'editorChange', 'inputChange', 'testValue']),
    renderValues = reactive({
      show: props.show,
      inputDefaultValue: props.inputDefaultValue,
      editorDefaultValue: props.editorDefaultValue,
      textPlaceholder: props.textPlaceholder,
      editorPlaceHolder: props.editorPlaceHolder,
      showInput: props.showInput,
      mdValue: {} as any
    });
const inputVal: Ref<string | undefined> = ref(''), editorValue: Ref<string | EditorVal> = ref('');
const hasContent = reactive({
  editor: false,
  input: false
})
watch(props, (n) => {
  Object.assign(renderValues, n)
}, {deep: true});
watch(() => renderValues.show, (n) => {
  if (!n) {
    if (renderValues.editorDefaultValue) {
      hasContent.editor = renderValues.editorDefaultValue.trim() !== '';
    } else {
      hasContent.editor = false;
    }
    if (renderValues.inputDefaultValue) {
      hasContent.input = renderValues.inputDefaultValue.trim() !== '';
    } else {
      hasContent.input = false;
    }
    emits('testValue', (hasContent.editor || hasContent.input));
    emits('close', n);
  } else {
    inputVal.value = renderValues.inputDefaultValue;
  }
})
/** 编辑器修改文本时的操作 */
const editorChangeHandler = (val: any) => {
  editorValue.value = val;
  if (val.md.trim() === '') {
    editorValue.value.md = '';
  }
  emits('editorChange', editorValue.value);
};
/**
 * 修改input时的操作
 */
watch(inputVal, (n) => {
  emits('inputChange', n);
})
</script>